<template>
  <div class="bgc_white " id="contactUS">
    <div class="contact_form" :style="'min-height:' + height">
      <el-form   :rules="rules" :model="form" ref="form" >
        <div class="step step1" v-show="curForm ==1" >
          <p class="color6size14">{{$t('CONTACTUS.CHOOSESUBJECT')}}</p>
          <p class="question">{{$t('CONTACTUS.HOWCANWEHELPYOU')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.SELECTTHESUBJECT')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.SUBJECT')}}</p>
          <el-form-item  prop="topic_type">
            <el-select  v-model="form.topic_type" :placeholder="$t('CONTACTUS.SELECTASUBJECT')" clearable  @change="setTopixType" >
              <el-option v-for="item in subjectList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <div class="btn_div"><el-button class="next" @click="nextStep()" :class="{'isFull': isStep1Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step2" v-show="curForm == 2 && curIssue == 2" >
          <p class="color6size14">{{$t('CONTACTUS.SOLUTION')}}</p>
          <p class="question">{{$t('CONTACTUS.SORRYABOUT')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.ISSUEEITHERREFUND')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.OPTIONPREFER')}}</p>
          <el-form-item prop="which_option_would_you_prefer">
            <el-select  v-model="form.which_option_would_you_prefer" :placeholder="$t('CONTACTUS.OPTIONPREFER')" clearable @change="changeOption" >
              <el-option v-for="item in optionList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>    
          </el-form-item>

          <p class="color6size14 form_item_label amazon" @click="contactAmazon">{{$t('CONTACTUS.CONTACTAMAZON')}}</p>
          <div class="btn_div"> <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  <el-button class="next"  @click="nextStep()" :class="{'isFull': isStep22Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step2" v-show="(curForm ==2 && curIssue == 0) ||   (curForm ==3 && curIssue == 1) || ( curForm ==3 && curIssue == 2)" >
          <p class="color6size14">{{$t('CONTACTUS.PERSONALINFORMATION')}}</p>
          <p class="question">{{$t('CONTACTUS.NOWORRIES')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.NEEDPERSONINFO')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.PURCHASEFROMAMAZONSITE')}}</p>
          <el-form-item  prop="purchase_from_amazon_site">
            <el-select  v-model="form.purchase_from_amazon_site" :placeholder="$t('CONTACTUS.SELECTYOURCOUNTRY')" clearable @change="changeCountry" >
              <el-option v-for="item in countryList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="isOtherCountry ">Country name</p>
          <el-form-item  prop="other_country"  v-show="isOtherCountry ">
            <el-input  v-model="form.other_country" />
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.NAME')}}</p>
          <el-form-item  prop="name">
            <el-input  v-model="form.name"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.EMAILADDRESS')}}</p>
          <el-form-item  prop="email">
            <el-input  v-model="form.email"/> 
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="curForm ==3 && curIssue == 2">{{$t('CONTACTUS.ORDERID')}}</p>
          <el-form-item prop="order_no" v-show="curForm ==3 && curIssue == 2">
            <el-input  v-model="form.order_no"/> 
          </el-form-item>
          <div class="btn_div"> 
            <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  
            <el-button class="next"  v-if="curForm == 3 && curIssue == 2 && isOptionRefund" 
              :loading="isRequest && curForm == 3 && curIssue == 2 && isOptionRefund"  @click="nextStep()"
              :class="{'isFull': isStep2Finish}">{{$t('CONTACTUS.SUBMIT')}}</el-button>
            <el-button class="next"  v-else @click="nextStep()" :class="{'isFull': isStep2Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step2" v-show="curForm ==2 && curIssue == 1 " >
          <p class="color6size14">{{$t('CONTACTUS.CHOOSESUBJECT')}}</p>
          <p class="question">{{$t('CONTACTUS.HOWCANWEHELPYOU')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.SELECTTHESUBJECT')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.PURCHASEWITHIN30')}}</p>
          <el-form-item  prop="is_buy_thirty_day">
            <el-select  v-model="form.is_buy_thirty_day" :placeholder="$t('CONTACTUS.PURCHASEWITHIN30')" clearable @change="changeBuyDay" >
              <el-option v-for="item in isIn30DayList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="isInThirtyDay && form.is_buy_thirty_day">{{$t('CONTACTUS.PRODUCTCATEGORY')}}</p>
          <el-form-item  prop="purchased_item" v-show="isInThirtyDay && form.is_buy_thirty_day">
            <el-select  v-model="form.purchased_item" :placeholder="$t('CONTACTUS.SELECTPRODUCT')" clearable @change="changeCountry" >
              <el-option v-for="item in productList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="!isInThirtyDay && form.is_buy_thirty_day">Select product category</p>
          <el-form-item  prop="select_product_category" v-show="!isInThirtyDay && form.is_buy_thirty_day">
            <el-select  v-model="form.select_product_category" placeholder="Select product category" clearable @change="changeShipCostOccurr" >
              <el-option v-for="item in selectProductCategoryList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="is_ship_cost_occurr && !isInThirtyDay && form.is_buy_thirty_day">{{$t('CONTACTUS.PRODUCTCATEGORY')}}</p>
          <el-form-item  prop="purchased_item" v-show="is_ship_cost_occurr && !isInThirtyDay && form.is_buy_thirty_day">
            <el-select  v-model="form.purchased_item" :placeholder="$t('CONTACTUS.SELECTPRODUCT')" clearable @change="changeCountry" >
              <el-option v-for="item in productList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <div class="btn_div"> <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  <el-button class="next"  @click="nextStep()" :class="{'isFull': isStep21Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step2" v-show=" (curForm == 2 && curIssue == 3)" >
          <p class="color6size14">{{$t('CONTACTUS.PERSONALINFORMATION')}}</p>
          <p class="question">No problem at all.</p>
          <p class="color6size14">{{$t('CONTACTUS.NEEDPERSONINFO')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.PURCHASEFROMAMAZONSITE')}}</p>
          <el-form-item  prop="purchase_from_amazon_site">
            <el-select  v-model="form.purchase_from_amazon_site" :placeholder="$t('CONTACTUS.SELECTYOURCOUNTRY')" clearable @change="changeCountry" >
              <el-option v-for="item in countryList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.NAME')}}</p>
          <el-form-item  prop="name">
            <el-input  v-model="form.name"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.EMAILADDRESS')}}</p>
          <el-form-item  prop="email">
            <el-input  v-model="form.email"/>
          </el-form-item>
          <p class="color6size14 form_item_label" v-show="curForm ==3 && curIssue == 2">{{$t('CONTACTUS.ORDERID')}}</p>
          <el-form-item prop="order_no" v-show="curForm ==3 && curIssue == 2">
            <el-input  v-model="form.order_no"/>
          </el-form-item>
          <div class="btn_div"> 
            <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  
            <el-button class="next"  @click="nextStep()" :class="{'isFull': isStep23Finish}">{{$t('CONTACTUS.NEXT')}}</el-button>
          </div>
        </div>
        <div class="step step3"   v-show="(curForm ==3 && (curIssue == 0)) ||  (curForm == 4 && curIssue == 1)">
          <p class="color6size14">{{$t('CONTACTUS.ORDERINFO')}}</p>
          <p class="question">{{$t('CONTACTUS.NOPROBLEM')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.DETAILABOUTORDER')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.MESSAGE')}}</p>
          <el-form-item prop="description">
            <el-input type="textarea" autosize v-model="form.description"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.ORDERID')}}</p>
          <el-form-item prop="order_no">
            <el-input  v-model="form.order_no"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.UPLOADIMAGE2')}}</p>
          <el-form-item  class="image_form_item">
          <div class="image_div" >
            <el-upload  class="avatar-uploader el-image" :action="uploadImageUrl" accept=".png,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.gif " :data="uploadData"
              :show-file-list="false"   :on-success="handleImageSuccess" multiple :before-upload="beforeImageUpload">
            <div class="addimage">
              <i class="iconfont icon-addimage"></i> 
            </div>
            </el-upload>
            <div v-for="(item,index) in form.httpImage" :key="item">
              <el-image  :src="item"></el-image>
              <p @click="removeImage(index)">
                <svg class="svgNormal"  >
                  <use xlink:href="#icon-deleteimage_normal"></use>
                </svg>
                <svg class="svgHover"  >
                  <use xlink:href="#icon-deleteimage_hover"></use>
                </svg>
              </p>
            </div>
         
            <p class="clearBoth"></p>
          </div>
          </el-form-item>
          <p class="color6size14 form_item_label mt8">{{$t('CONTACTUS.PRODUCTCODE')}}</p>
          <el-form-item >
            <el-input  v-model="form.product_code"/>
          </el-form-item>
          
          <el-popover placement="bottom-start" title="" width="464" trigger="hover" popper-class="sample_img" >
            <el-carousel height="214px" :arrow="never">
              <el-carousel-item v-for="item in Product_Code" :key="item" >
                <el-image :src="item.image1"></el-image> <el-image :src="item.image2"></el-image>
              </el-carousel-item>
            </el-carousel>
            <p class="color6size14" slot="reference">{{$t('CONTACTUS.FINDPRODUCTCODE')}}</p>
          </el-popover>  

          <p class="color6size14 form_item_label mt8">{{$t('CONTACTUS.CASEID')}}</p>
          <el-form-item >
            <el-input  v-model="form.case_id"/>
          </el-form-item>
          
          <div class="btn_div"> <el-button class="back" @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  <el-button class="next"  @click="nextStep()" :class="{'isFull': isStep3Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step3"   v-show="(curForm == 3 && curIssue == 3) ">
          <p class="color6size14">{{$t('CONTACTUS.MESSAGE')}}</p>
          <p class="question">{{$t('CONTACTUS.DESCRIBEISSUE')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.NEEDPERSONINFO')}}</p>
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.MESSAGE')}}</p>
          <el-form-item prop="description">
            <el-input type="textarea" autosize v-model="form.description"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.ORDERID')}}(optional)</p>
          <el-form-item >
            <el-input  v-model="form.order_no"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.UPLOADIMAGE')}}</p>
          <div class="image_div">
            <el-upload  class="avatar-uploader el-image" :action="uploadImageUrl" accept=".png,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.gif " :data="uploadData"
              :show-file-list="false"   :on-success="handleImageSuccess" multiple :before-upload="beforeImageUpload">
            <div class="addimage">
              <i class="iconfont icon-addimage"></i> 
            </div>
            </el-upload>
            <div v-for="(item,index) in form.httpImage" :key="item">
              <el-image  :src="item"></el-image>
              <p @click="removeImage(index)">
                <svg class="svgNormal"  >
                  <use xlink:href="#icon-deleteimage_normal"></use>
                </svg>
                <svg class="svgHover"  >
                  <use xlink:href="#icon-deleteimage_hover"></use>
                </svg>
              </p>
            </div>
            <p class="clearBoth"></p>
          </div>
          <div class="btn_div"> 
            <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  
           
            <el-button class="next" :loading="isRequest && curForm == 3 && curIssue == 3"  
              v-if="curForm == 3 && curIssue == 3"   @click="nextStep()" 
              :class="{'isFull': isStep33Finish}">{{$t('CONTACTUS.SUBMIT')}}</el-button>
            <el-button class="next"  @click="nextStep()" v-else
             :class="{'isFull': isStep33Finish}"> {{$t('CONTACTUS.NEXT')}}</el-button>
          </div>
        </div>
        <div class="step step4" v-show="(curForm == 4 && (curIssue == 0) ) || (curForm == 5 && curIssue == 1) || (curForm ==4 && curIssue == 2 && !isOptionRefund)" >
          <p class="color6size14">{{$t('CONTACTUS.SHIPPINGADDRESS')}}</p>
          <p class="question">{{$t('CONTACTUS.ALMOSTDONE')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.PROVIDESHIPPINGINFO')}}</p>
    
          <p class="color6size14 form_item_label marginTop32">{{$t('CONTACTUS.ADDRESSONE')}}</p>
          <el-form-item prop="addrss_one">
            <el-input  v-model="form.addrss_one"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.ADDRESSTWO')}}</p>
          <el-form-item>
            <el-input  v-model="form.addrss_two"/>
          </el-form-item>
          
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.CITY')}}</p>
          <el-form-item prop="city">
            <el-input  v-model="form.city"/>
          </el-form-item>
          
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.STATEPROVINCEREGION')}}</p>
          <el-form-item prop="state_province_region">
            <el-input  v-model="form.state_province_region"/>
          </el-form-item>
          
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.POSTALCODE')}}</p>
          <el-form-item prop="postal_code">
            <el-input  v-model="form.postal_code"/>
          </el-form-item>
          <p class="color6size14 form_item_label">{{$t('CONTACTUS.PHONE')}}</p>
          <el-form-item prop="phone">
            <el-input  v-model="form.phone"/>
          </el-form-item>
          <div class="btn_div">  
            <el-button class="back"  @click="backStep">{{$t('CONTACTUS.BACK')}}</el-button>  
            <el-button class="next" :loading="isRequest &&( (curForm == 4 && curIssue == 0) || (curForm == 5 && curIssue == 1)  || (curForm == 4 && curIssue == 2))"  
              v-if="(curForm == 4 && curIssue == 0) || (curForm == 5 && curIssue == 1)  || (curForm == 4 && curIssue == 2)" 
              @click="nextStep()" :class="{'isFull': isStep4Finish}">{{$t('CONTACTUS.SUBMIT')}}</el-button>
            <el-button class="next" v-else   @click="nextStep()" :class="{'isFull': isStep4Finish}">{{$t('CONTACTUS.NEXT')}}</el-button></div>
        </div>
        <div class="step step5" v-show="(curForm == 5 && curIssue == 0) ||(curForm == 6 && curIssue == 1) ||( curForm ==4 && curIssue == 2 &&isOptionRefund) || ( curForm ==5 && curIssue == 2 && !isOptionRefund)  || (curForm == 4 && curIssue == 3)" >
          <p class="color6size14">{{$t('CONTACTUS.CONFIRMATION')}}</p>
          <p class="question">{{$t('CONTACTUS.RECEIVED')}}</p>
          <p class="color6size14">{{$t('CONTACTUS.GETBACKTOYOU')}}</p>
        </div>
        <div class="link_list"> 
          <!-- <p>• <a href="" class="color6size14">{{$t('CONTACTUS.VIEWWARRANTYPOLICY')}}</a></p> -->
          <p>• <a href="/warranty" class="color6size14">{{$t('CONTACTUS.REGISTERYOURPRODUCT')}}</a></p>
          <p>• <a href="/warrantyPolicy" class="color6size14">View our full Warranty Policy</a></p>
        </div>
      </el-form>
    </div>
    
  </div>
</template>

<script>
import { randomString, timeFormat } from '@/utils/index'
import md5 from 'js-md5';
import { mapGetters } from 'vuex'
import { contactUsForm } from '@/api/contactUs/index'

export default {
  data () {
    return {
      isRequest: false,
      uploadImageUrl: '/api/front/general/upload',
      uploadData: {
        imagewidth: '',
        imageheight: '',
        type: 'after_sale',
        r: '',
        p:''
      },
      height: null,
      curForm: 1,
      curIssue: 0,
      isOtherCountry: false,
      isInThirtyDay: false,
      is_ship_cost_occurr: false,
      isOptionRefund: false,
      Product_Code :[
        {image1: require('@/assets/Product_Code/ProductCodeCable.jpg'), image2: require('@/assets/Product_Code/ProductCodeCharger.jpg')},
        // {image1: require('@/assets/Product_Code/RAD03.jpg'), image2: require('@/assets/Product_Code/RAE07.jpg')},
        // {image1: require('@/assets/Product_Code/RBA18.jpg'), image2: require('@/assets/Product_Code/RBB03.jpg')},
        // {image1: require('@/assets/Product_Code/RCA01.jpg'), image2: require('@/assets/Product_Code/RCB04.jpg')},
        // {image1: require('@/assets/Product_Code/RCB31.jpg'), image2: require('@/assets/Product_Code/RCB39.jpg')},

      ],
      form: {
        topic_type: '',
        purchase_from_amazon_site: '',
        other_country: '', //country 为Other country 必填
        name: '',
        email: '',
        order_no: '',
        description: '',
        product_code: '',
        addrss_one: '',
        addrss_two: '',
        state_province_region: '',
        postal_code:'',
        phone: '',
        is_buy_thirty_day:'',
        purchased_item: '',
        select_product_category: '',
        which_option_would_you_prefer: '',
        amazon_region: '',
        local_time: '', //当地创建时间
        r: '', // 10位当前时间时间戳 + 22 随机数（数字+字母）
        p: '', // md5((md5(r)+ r) 
        image: [],
        httpImage: [],
        case_id: ''
      },
      // subjectList:
      countryList: [
        {value: 'Amazon.com', label: 'Amazon.com'},
        {value: 'Amazon.de', label: 'Amazon.de'},
        {value: 'Amazon.fr', label: 'Amazon.fr'},
        {value: 'Amazon.it', label: 'Amazon.it'},
        {value: 'Amazon.es', label: 'Amazon.es'},
        {value: 'Amazon.ca', label: 'Amazon.ca'},
        {value: 'Amazon.com.au', label: 'Amazon.com.au'},
        {value: 'Amazon.co.uk', label: 'Amazon.co.uk'},
        {value: 'Amazon.co.jp', label: 'Amazon.co.jp'},
        {value: 'Other country', label: 'Other country'},
      ],
      arrow: 'hover'
    }
  },
  computed: {
    rules () {
      return {
        topic_type:[  { required: true, trigger: 'blur', message: this.$t('CONTACTUS.SELECTASUBJECT') }],
        purchase_from_amazon_site: [ { required: true, trigger: 'change',message: this.$t('CONTACTUS.PLEASESELECTCOUNTER') },  ],
        name: [ { required: true, trigger: 'blur',message: this.$t('CONTACTUS.ENTERNAME')  }, ],
        email: [
          { required: true, trigger: 'change', message: this.$t('CONTACTUS.ENTEREMAILADDRESS') },
          { type: 'email',  trigger: ['blur', 'change'], message: this.$t('CONTACTUS.ENTEREMAILADDRESS') }
        ],
        other_country: [   { required: true, trigger: 'change' },  ],
        order_no: [  { required: true, trigger: 'change' ,message: this.$t('CONTACTUS.ENTERAMAZONORDERID')},  ],
        description: [  { required: true, trigger: 'blur', message: this.$t('CONTACTUS.TELLUSMOREINFO')}, ],
        addrss_one: [ { required: true, trigger: 'blur', message: this.$t('CONTACTUS.ENTERADDRESS') }, ],
        city: [  { required: true, trigger: 'blur' ,message: this.$t('CONTACTUS.ENTERCITY')},    ],
        state_province_region: [  { required: true, trigger: 'blur' ,message: this.$t('CONTACTUS.ENTERSTATE')},   ],
        postal_code: [    { required: true, trigger: 'blur' ,message: this.$t('CONTACTUS.ENTERPOSTALCODE')}, ],
        phone: [ { required: true, trigger: 'blur' ,message: this.$t('CONTACTUS.ENTERPHONE')}, ],
        is_buy_thirty_day: [ { required: true, trigger: 'blur' },  ],
        purchased_item: [  { required: true, trigger: 'blur' },],
        select_product_category: [  { required: true, trigger: 'blur' },],
        which_option_would_you_prefer: [  { required: true, trigger: 'blur' },],
      }  
    },
    selectProductCategoryList(){
      return [
        {value: 'Video', label: 'Video'},
        {value: 'Audio', label: 'Audio'},
        {value: 'Video Extender', label: 'Video Extender'},
      ]
    },
    optionList () {
      return [
        {value: 'Refund', label: this.$t('CONTACTUS.REFUND')},
        {value: 'Reshipment', label: this.$t('CONTACTUS.RESHIPMENT')},
      ]
    },
    productList () {
      return  [
         {value: 'Cables', label: this.$t('CONTACTUS.CABLES')},
         {value: 'Chargers', label: this.$t('CONTACTUS.CHARGERS')},
         {value: 'Adapters', label: this.$t('CONTACTUS.ADAPTER')},
         {value: 'Stand', label: this.$t('CONTACTUS.STAND')},
      ]
    },
    subjectList () {
      return  [
        {value: 'I received the wrong item!', label: this.$t('CONTACTUS.WRONGITEM') },
        {value: 'I got a faulty item here!', label: this.$t('CONTACTUS.FAUTYITEM') },
        {value: 'I never received my package!', label: this.$t('CONTACTUS.NEAVERRECEIVEDPACKAGE')},
        {value: 'I just want to get in touch.', label: this.$t('CONTACTUS.GETINTOUCH')},
      ]
    },
    isIn30DayList () {
      return [
        {value: 'Yes', label: this.$t('CONTACTUS.YES')},
        {value: 'No', label: this.$t('CONTACTUS.NO')},
      ]
    },
    
    ...mapGetters(['curSite', 'isPhone']),
    isStep1Finish () {
      let isFull = true
      if (this.form.topic_type.length > 0) {
        this.validateField1(function(msg){
          isFull = isFull && !msg
        })
      }else {
        isFull = false
      }
      return isFull
    },
    isStep2Finish () {
      let isFull = true
      let purchase_from_amazon_site = this.form.purchase_from_amazon_site 
      let name = this.form.name
      let email = this.form.email
      if (purchase_from_amazon_site && name && email) {
       this.validateField2(function(msg){
          isFull = isFull && !msg
       })
      }else {
        isFull = false
      }
      return isFull
    },
    isStep3Finish () {
      let isFull = true
      let description = this.form.description 
      let order_no = this.form.order_no
      if (description  && order_no ) {
        this.validateField3(function(msg){
          isFull = isFull && !msg 
        })  
      }else {
        isFull = false
      }
      return isFull
    },
    isStep33Finish () {
      let isFull = true
      let description = this.form.description 
      if (description) {
        this.validateField33(function(msg){
          isFull = isFull && !msg
        })
      }else {
        isFull = false
      }
      return isFull
    },
    isStep4Finish () {
      let isFull = true
      let addrss_one = this.form.addrss_one 
      let city = this.form.city
      let state_province_region = this.form.state_province_region 
      let postal_code = this.form.postal_code
      let phone = this.form.phone
      let array = ['addrss_one', 'city', 'postal_code', 'state_province_region', 'phone']
      if (addrss_one  && city && state_province_region && postal_code && phone) {
        this.$refs.form.validateField(array, (msg)=>{
          isFull = isFull && !msg
        })   
      }else {
        isFull = false
      }
      return isFull
    },
    isStep21Finish () {
      let isFull = true
      let is_buy_thirty_day = this.form.is_buy_thirty_day 
      if (is_buy_thirty_day ) {
       this.validateField21(function(msg){
          isFull = isFull && !msg
       })
      }else {
        isFull = false
      }
      return isFull
    },
    isStep22Finish () {
      let isFull = true
      let which_option_would_you_prefer = this.form.which_option_would_you_prefer 
      if (which_option_would_you_prefer ) {
        this.validateField22(function(msg){
        isFull = isFull && !msg
       })
        
      }else {
        isFull = false
      }
      return isFull
    },
    isStep23Finish () {
      let isFull = true
      let name = this.form.name
      let email = this.form.email
      if ( name && email) {
         this.validateField23(function(msg){
          isFull = isFull && !msg
       })
      }else {
        isFull = false
      }
      return isFull
    }
  },
  
  mounted (){
    if(this.isPhone) {
      this.arrow = 'always'
    }
  },
  methods: {
    removeImage (index) {
      this.form.httpImage.splice(index, 1)
      this.form.image.splice(index, 1)
    },
    validateField1(callback){
      this.$refs.form.validateField('topic_type', (msg)=>{
        // isFull = isFull && !msg
        callback(msg)
      })
    },
    validateField2 (callback) {
      let array = ['email', 'name', 'purchase_from_amazon_site']
      if (this.isOtherCountry) {
        array.push('other_country')
      }
      if (this.curForm ==3 && this.curIssue == 2){
        array.push('order_no')
      }
      this.$refs.form.validateField(array, (msg)=>{
        // isFull = isFull && !msg
          callback(msg)
      })
      
    },
    validateField3 (callback) {
      let array = ['description', 'order_no', 'image']
      this.$refs.form.validateField(array, (msg)=>{
        // isFull = isFull && !msg
        callback(msg)
      })
    },
    validateField4 (callback) {
      let array = ['addrss_one', 'city', 'postal_code', 'state_province_region', 'phone']
      this.$refs.form.validateField(array, (msg)=>{
        callback(msg)
      })   
    
    },
    validateField21 (callback) {
      let array = ['is_buy_thirty_day']
      if (this.isInThirtyDay ) {
        array.push('purchased_item')
      } else {
        array.push('shipping_cost_occurred')
        if (this.is_ship_cost_occurr) {
          array.push('purchased_item')
        }
      }
      this.$refs.form.validateField(array, (msg)=>{
        callback(msg)
      })
    
    },
    validateField22 (callback) {
      let array = ['which_option_would_you_prefer']
      this.$refs.form.validateField(array, (msg)=>{
          callback(msg)
      })
    },
    validateField23 (callback) {
      let array = ['email', 'name', 'purchase_from_amazon_site']
      this.$refs.form.validateField(array, (msg)=>{
          callback(msg)
      })
    },
    validateField33 (callback) {
      let array = ['description']
      this.$refs.form.validateField(array, (msg)=>{
          callback(msg)
      })
    },



    handleImageSuccess (response) {
      this.form.image.push(response.data.filePathName)
      this.form.httpImage.push(response.data.filePathNameHttp)
    },
    beforeImageUpload (file) {
      let that = this
      let type = ['image/png', 'image/jpg', 'image/jpeg', 'image/jfif', 'image/pjpeg', 'image/pjp', 'image/gif' ]
      if(type.indexOf(file.type) == -1 ){
        this.$message.error("仅支持.png/.jpg/.jpeg/.jfif/.pjpeg/.pjp/.gif格式的图片")
        return false
      }
      let obj = this.setRP()
      that.uploadData.r = obj.r 
      that.uploadData.p = obj.p

      const isSize = new Promise(function(resolve, reject){
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = true
          valid ? resolve() : reject();
          that.uploadData.imagewidth = img.width
          that.uploadData.imageheight = img.height
        }
        img.src = _URL.createObjectURL(file);
      }).then(()=>{
        return file
      }, ()=>{
        return Promise.reject()
      })
      return isSize
     
    },
    setRP () {
      let timestamp = new Date().getTime()
      timestamp = timestamp.toString().substring(0, 10)
      let r = timestamp + randomString(22)
      let p = md5(r)
      p = md5(p+r)
      let obj = {
        r: r,
        p: p
      }
      return obj
    },
    changeOption (value) {
       if (value == 'Refund') {
        this.isOptionRefund = true
      } else {
        this.isOptionRefund = false
      }
    },
    contactAmazon () {
      let curSite = this.curSite.site.toUpperCase()
      let url = 'https://www.amazon.com/gp/help/customer/contact-us'
      if (curSite == 'AU') {
        url = 'https://www.amazon.com.au/gp/help/customer/contact-us'
      } else if (curSite == 'CA'){
        url = 'https://www.amazon.ca/gp/help/customer/contact-us'
      }else if (curSite == 'DE'){
        url = 'https://www.amazon.de/gp/help/customer/contact-us'
      }else if (curSite == 'ES'){
        url = 'https://www.amazon.es/gp/help/customer/contact-us'
      }else if (curSite == 'FR'){
        url = 'https://www.amazon.fr/gp/help/customer/contact-us'
      }else if (curSite == 'IT'){
        url = 'https://www.amazon.it/gp/help/customer/contact-us'
      }else if (curSite == 'JP'){
        url = 'https://www.amazon.jp/gp/help/customer/contact-us'
      }else if (curSite == 'UK'){
        url = 'https://www.amazon.co.uk/gp/help/customer/contact-us'
      }else if (curSite == 'US'){
        url = 'https://www.amazon.com/gp/help/customer/contact-us'
      }
      console.log(curSite, url)
      window.open(url)
    },
    nextStep () {
      let isSubmit = (this.curForm == 4 && this.curIssue == 0) || (this.curForm == 5 && this.curIssue == 1) ||
        (this.curForm == 3 && this.curIssue == 2 && this.isOptionRefund) ||
        (this.curForm == 4 && this.curIssue == 2 && !this.isOptionRefund) ||
        (this.curForm == 3 && this.curIssue == 3) 
      let that = this
      let isFull = true 

      if(this.curForm == 1){
        this.validateField1(function(msg){
          isFull = isFull && !msg
        })
      } else if(this.curForm == 2 && this.curIssue == 0 || (this.curForm ==3 && this.curIssue == 1) || ( this.curForm ==3 && this.curIssue == 2)){
        this.validateField2(function(msg){
          isFull = isFull && !msg
        })
      }else if(this.curForm == 3 && this.curIssue == 0 ||  (this.curForm == 4 && this.curIssue == 1)) {
        this.validateField3(function(msg){
          isFull = isFull && !msg
        })
      } else if (this.curForm == 4 && this.curIssue == 0 || (this.curForm == 5 && this.curIssue == 1) || (this.curForm ==4 && this.curIssue == 2 && !this.isOptionRefund)) {
        this.validateField4(function(msg){
          isFull = isFull && !msg
        })
      
      }else if (this.curForm == 2 && this.curIssue == 1) {
        this.validateField21(function(msg){
          isFull = isFull && !msg
        })
      } else if (this.curForm == 2 && this.curIssue == 2) {
        this.validateField22(function(msg){
          isFull = isFull && !msg
        })
      }else if (this.curForm == 2 && this.curIssue == 3) {
        this.validateField23(function(msg){
          isFull = isFull && !msg
        })
      }else if (this.curForm == 3 && this.curIssue == 3) {
        this.validateField33(function(msg){
          isFull = isFull && !msg
        })
      }
      
      if(isFull){
        if (isSubmit) {
          this.submitForm ()
        }else {
          that.curForm +=1
        }
      }
    },
    backStep () {
      if (this.curForm > 0){
        this.curForm -=1
      }
    },
    submitForm() {
      this.isRequest = true
      let date = new Date()
      this.form.local_time = timeFormat(date)
      let obj = this.setRP()
      this.form.r = obj.r;
      this.form.p = obj.p;
      let purchase_from_amazon_site = this.form.purchase_from_amazon_site
      let amazon_region = ''
      if (purchase_from_amazon_site == 'Amazon.com') {
        amazon_region = 'United States'
      } else if (purchase_from_amazon_site == 'Amazon.de') {
        amazon_region = 'Deutschland'
      } else if (purchase_from_amazon_site == 'Amazon.fr') {
        amazon_region = 'France'
      } else if (purchase_from_amazon_site == 'Amazon.it') {
        amazon_region = 'Italia'
      } else if (purchase_from_amazon_site == 'Amazon.es') {
        amazon_region = 'España'
      } else if (purchase_from_amazon_site == 'Amazon.ca') {
        amazon_region = 'Canada'
      } else if (purchase_from_amazon_site == 'Amazon.com.au') {
        amazon_region = 'Australia'
      } else if (purchase_from_amazon_site == 'Amazon.co.uk') {
        amazon_region = 'United Kingdom'
      } else if (purchase_from_amazon_site == 'Amazon.co.jp') {
        amazon_region = '日本'
      } else if (purchase_from_amazon_site == 'Other country') {
        amazon_region = this.form.other_country
      } else {
        amazon_region = this.curSite.name_en
      }
      this.form.amazon_region = amazon_region
      let params = this.form
      contactUsForm(params).then((res)=>{
        this.curForm +=1
        this.isRequest = false

        console.log( '*******************',res, '*******************')
      })
    },
    changeCountry (value) {
      if (value == 'Other country') {
        this.isOtherCountry = true
      } else {
        this.isOtherCountry = false
      }
    },
    changeShipCostOccurr (value) {
      if (value == 'Yes') {
        this.is_ship_cost_occurr = true
      } else {
        this.is_ship_cost_occurr = false
      }
      this.form.purchased_item = ''
    },
    changeBuyDay (value) {
      if (value == 'Yes') {
        this.isInThirtyDay = true
      } else {
        this.isInThirtyDay = false 
      }
      this.form.purchased_item = ''
      this.form.shipping_cost_occurred = ''
    },
    setTopixType (value) {
      for(let i = 0; i < this.subjectList.length; i++ ){
        if(this.subjectList[i].value == value) {
          this.curIssue = i
        }
      }
    },
  }
}
</script>

<style lang="scss">
@import '@/styles/support/contactUs.scss';
.image_form_item{
  .el-form-item__error{
    top: 80%;
  }
}
</style>